<template>
  <div>

    <!-- 物业管理系统主页 -->
    <el-card class="box-card1" style="width: 100%">
      <div class="text1 item1">
        <strong>{{ 'PSM物业管理系统主页' }}</strong>
      </div>
    </el-card>

    <div class="middle">
      <!-- 工单信息区域 -->
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span>工单</span>
        </div>
        <div class="text2 item2">
          <el-card class="box-card3">
            {{ '待解决工单' }}<br>
            <strong class="s-tex">3</strong>
          </el-card>
          <el-card class="box-card3" style="margin-left: 20px">
            {{ '今日已解决工单' }}<br>
            <strong class="s-tex">5</strong>
          </el-card>
        </div>
        <div class="text2 item2">
          <el-card class="box-card3">
            {{ '本月解决工单数' }}<br>
            <strong class="s-tex">62</strong>
          </el-card>
          <el-card class="box-card3" style="margin-left: 20px">
            {{ '总工单数' }}<br>
            <strong class="s-tex" style="margin-top: 20px">365</strong>
          </el-card>
        </div>
      </el-card>

      <!-- 图表容器 -->
      <el-card class="box-pie">
        <div id="chart" style="width: 600px; height: 400px;"></div>
      </el-card>
    </div>

    <!-- 小区统计信息 -->
    <el-card class="box-card4">
      <div class="text4 item4">
        <el-card class="box-card5">
          {{ '小区总栋数' }}
          <div class="pie-chart" style="background-color: #629755">23</div>
        </el-card>
        <el-card class="box-card5">
          {{ '小区总户数' }}
          <div class="pie-chart" style="background-color: #009afe"><p>329</p></div>
        </el-card>
        <el-card class="box-card5">
          {{ '小区车位数' }}
          <div class="pie-chart" style="background-color: #ea9904"><p>972</p></div>
        </el-card>
        <el-card class="box-card5">
          {{ '占地面积/万平方米' }}
          <div class="pie-chart" style="background-color: #abd7ce"><p>27</p></div>
        </el-card>
        <el-card class="box-card5">
          {{ '小区总人数' }}
          <div class="pie-chart" style="background-color: #f53838"><p>754</p></div>
        </el-card>
        <el-card class="box-card5">
          {{ '小区车辆数' }}
          <div class="pie-chart" style="background-color: #54721b"><p>392</p></div>
        </el-card>
      </div>
    </el-card>

  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Echarts",
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 初始化图表
      const chart = echarts.init(document.getElementById('chart'))
      // 配置图表数据
      const option = {
        title: {
          text: '小区入住率'
        },
        xAxis: {
          type: 'category',
          data: ['已入住', '未入住'],
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            data: [
              { value: 75.87, name: '75.87% 已入住' },
              { value: 9.13, name: '9.13% 未入住' },
              { value: 15, name: '15% 闲置' }
            ],
          }
        ]
      }
      // 使用图表配置
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.text1 {
  font-size: 20px;
  color: rgb(0, 79, 254);
  margin-top: -11px;
}

.item1 {
  padding: 18px 0;
}

.box-card1 {
  width: 480px;
  height: 70px;
  margin-top: 20px;
}

.item2 {
  margin-bottom: 18px;
  display: flex;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card2 {
  width: 700px;
  height: 440px;
}

.box-card3 {
  width: 255px;
  height: 140px;
  background-color: #e1e1e1;
  margin-left: 40px;
}

.text2 {
  color: #CCC;
  font-size: 17px;
}

.box-pie {
  margin-left: 20px;
  width: 700px;
  height: 440px;
}

.middle {
  display: flex;
  margin-top: 20px;
}

.s-tex {
  font-size: 36px;
  color: #004ff4;
}

.box-card4 {
  width: 100%;
  height: 300px;
  display: flex;
}

.box-card5 {
  width: 255px;
  height: 180px;
  margin-left: 20px;
}

.item4 {
  display: flex;
}

.pie-chart {
  margin: 0 auto;  /* 使圆居中 */
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 形成圆形 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: white;
  font-size: 24px; /* 根据需要调整字体大小 */
}

</style>
